<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3: images Filter</title>
	<style type="text/css">
		body{
			font-family:"segoe ui",calibri,arial,sans-serif;
			background:whitesmoke;
			text-align:center;
		}
		#wrapper{
			width:960px;
			margin:0 auto;
			overflow:hidden;
		}
		figure{
			float:left;
			border-radius:2px;
			padding:10px;
			box-shadow:0 2px 5px rgba(0,0,0,.1);
			margin:10px;
			background:white;
		}
		figcaption{ text-align:center }
		figure img{ -webkit-transition:-webkit-filter .5s ease-in-out; }
		/* Sebagai fallback ketika browser lain support filter */
		figure img{ -moz-transition:-moz-filter .5s ease-in-out; }
		figure img{ -ms-transition:-ms-filter .5s ease-in-out; }
		figure img{ -o-transition:-o-filter .5s ease-in-out; }
		figure img{ transition:filter .5s ease-in-out; }

		/* Bermain-main dengan CSS3: Filter */
		.blur:hover img{ -webkit-filter:blur(2px) }
		.grayscale:hover img{ -webkit-filter:grayscale(100%) }
		.contrast:hover img{ -webkit-filter:contrast(20%) }
		.brightness:hover img{ -webkit-filter:brightness(20%) }
		.invert:hover img{ -webkit-filter:invert(100%) }
		.saturate:hover img{ -webkit-filter:saturate(40%) }
		.hue-rotate:hover img { -webkit-filter:hue-rotate(40deg) }
		.sepia:hover img { -webkit-filter:sepia(90%) }

		/* 
		Baris Code berikut hanya optional :
		Sampai saat ini hanya Chrome dan Safari versi terbaru yang support, browser lain masih belum, namun tidak ada salahnya mencoba dengan menambahkan prefix browserlainnya. */
		.blur:hover img{ -moz-filter:blur(2px) }
		.grayscale:hover img{ -moz-filter:grayscale(100%) }
		.contrast:hover img{ -moz-filter:contrast(20%) }
		.brightness:hover img{ -moz-filter:brightness(20%) }
		.invert:hover img{ -moz-filter:invert(100%) }
		.saturate:hover img{ -moz-filter:saturate(40%) }
		.hue-rotate:hover img { -moz-filter:hue-rotate(40deg) }
		.sepia:hover img { -moz-filter:sepia(90%) }

		.blur:hover img{ -ms-filter:blur(2px) }
		.grayscale:hover img{ -ms-filter:grayscale(100%) }
		.contrast:hover img{ -ms-filter:contrast(20%) }
		.brightness:hover img{ -ms-filter:brightness(20%) }
		.invert:hover img{ -ms-filter:invert(100%) }
		.saturate:hover img{ -ms-filter:saturate(40%) }
		.hue-rotate:hover img { -ms-filter:hue-rotate(40deg) }
		.sepia:hover img { -ms-filter:sepia(90%) }

		.blur:hover img{ -o-filter:blur(2px) }
		.grayscale:hover img{ -o-filter:grayscale(100%) }
		.contrast:hover img{ -o-filter:contrast(20%) }
		.brightness:hover img{ -o-filter:brightness(20%) }
		.invert:hover img{ -o-filter:invert(100%) }
		.saturate:hover img{ -o-filter:saturate(40%) }
		.hue-rotate:hover img { -o-filter:hue-rotate(40deg) }
		.sepia:hover img { -o-filter:sepia(90%) }

		.blur:hover img{ filter:blur(2px) }
		.grayscale:hover img{ filter:grayscale(100%) }
		.contrast:hover img{ filter:contrast(20%) }
		.brightness:hover img{ filter:brightness(20%) }
		.invert:hover img{ filter:invert(100%) }
		.saturate:hover img{ filter:saturate(40%) }
		.hue-rotate:hover img { filter:hue-rotate(40deg) }
		.sepia:hover img { filter:sepia(90%) }
	</style>
</head>
<body>
	
	<div id="wrapper">
		<h1>CSS3 : Filter</h1>
		<p>SAGITARIUS KUSADHI</p>
		<p>
			<a href="https://twitter.com/Sagitariusadhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @Sagitariusadhi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
		</p>

		<!-- Code dari Tutorial -->
		<figure class="blur">
			<img src="1.jpg" alt="">
			<figcaption>Filter: Blur</figcaption>
		</figure>
		<figure class="grayscale">
			<img src="2.jpg" alt="">
			<figcaption>Filter: Grayscale</figcaption>
		</figure>
		<figure class="contrast">
			<img src="3.jpg" alt="">
			<figcaption>Filter: Contrast</figcaption>
		</figure>
		<figure class="brightness">
			<img src="4.jpg" alt="">
			<figcaption>Filter: Brightness</figcaption>
		</figure>
		<figure class="invert">
			<img src="5.jpg" alt="">
			<figcaption>Filter: Invert</figcaption>
		</figure>
		<figure class="saturate">
			<img src="6.jpg" alt="">
			<figcaption>Filter: Saturate</figcaption>
		</figure>
		<figure class="hue-rotate">
			<img src="7.jpg" alt="">
			<figcaption>Filter: Hue-rotate</figcaption>
		</figure>
		<figure class="sepia">
			<img src="8.jpg" alt="">
			<figcaption>Filter: Sepia</figcaption>
		</figure>

		
		<div style="clear" both=""></div>
		<em>Demonstrasi ini telah diuji dan berjalan pada <strong>Chrome 19 dan Safari terbaru</strong></em><br>
		<a href="http://shaggyweb.blogspot.com/2014/09/css3-images-filter.html">Kembali ke Tutorial</a>
	</div>
</body>
</html>
